<template>
    <!-- <div class="content">
        <div class="ball"></div>
        <div class="ball"></div>
    </div> -->
    <div class="content">
        <div class="first"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
        <div class="ball"></div>
    </div>


</template>

<script setup>
    import { ref } from 'vue'
    
</script>

<style lang="scss" scoped>
$count: 7;

// .content {
//     margin: 100px 0 0 100px;
//     width: 500px;
//     height: 200px;
//     // filter: blur(5px) contrast(10);
//     filter: blur(5px) contrast(10);
//     background-color: #FFFFFF;
//     position: relative;
// }

// .ball {
//     position: absolute;
//     top: 35px;
//     left: 230px;
//     width: 60px;
//     height: 60px;
//     background: #000000;
//     border-radius: 50%;
// }
// .ball:nth-child(2) {
//     top: 80px;
// }

.content {
    margin: 100px 0 0 100px;
    width: 500px;
    height: 100px;
    filter: blur(5px) contrast(10);
    background-color: #FFFFFF;
    position: relative;
}

.ball, .first{
    position: absolute;
    top: 35px;
    left: 250px;
    width: 30px;
    height: 30px;
    background: #000000;
    border-radius: 50%;
    transform: translate(-600%, 0);
    opacity: 0;
}

.first {
    animation: scaleMove 3.5s infinite linear;
}

@for $i from 0 through $count { 
    .ball:nth-child(#{$i}) {
        animation: move 3.5s infinite #{$i * 0.21}s linear;
    }
}

@keyframes move {
    25% {
        opacity: 1;
        transform: translate(-10px, 0);
    }
    50% {
        opacity: 1;
        transform: translate(0, 0);
    }
    75%,
    100% {
        opacity: 0;
        transform: translate(600%, 0);
    }
}

@keyframes scaleMove {
    25% {
        opacity: 1;
        transform:  translate(-10px, 0) 
    }
    35% {
        opacity: 1;
        transform:  translate(-5px, 0) scale(1);
    }
    70% {
        opacity: 1;
        transform: translate(0, 0) scale(1.7);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
}
</style>